<template>
  <div>
    <el-container>
      <el-descriptions :column="2" colon>
        <el-descriptions-item label="用户名"> {{ userInfo.acc }}</el-descriptions-item>
        <el-descriptions-item label="姓名"> {{ userInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="性别"> {{ userInfo.sex }}</el-descriptions-item>
        <el-descriptions-item label="教师简介"> {{ userInfo.jsbz }}</el-descriptions-item>
        <el-descriptions-item label="手机号"> {{ userInfo.lxfs }}</el-descriptions-item>
      </el-descriptions>
      <div>
        <el-button class="add-button" size="medium" @click="editInfo">编辑个人信息</el-button>
        <PersonEdit ref="Info"></PersonEdit>
      </div>
      <div>
        <el-button class="add-button" size="medium" @click="editTime">编辑预约时间</el-button>
        <EditAvailTime ref="Time"></EditAvailTime>
      </div>
    </el-container>
  </div>
</template>

<script>
import PersonEdit from './PersonEdit'
import EditAvailTime from './EditAvailTime'

export default {
  name: 'PersonInfo',
  components: {PersonEdit, EditAvailTime},
  data () {
    return {
      userInfo: {
        id: '',
        acc: '',
        name: '',
        sex: '',
        jsbz: '',
        lxfs: ''
      },
      userTime: {
        id: '',
        acc: '',
        ksrq: '',
        jsrq: ''
      }
    }
  },
  methods: {
    editInfo () {
      this.$refs.Info.dialogFormVisible = true
      this.$refs.Info.confirmForm = this.userInfo
    },
    editTime () {
      this.$refs.Time.dialogFormVisible = true
      this.$refs.Time.confirmForm = this.userTime
    }
  },
  mounted () {
    this.$axios.get('/teacher/user/' + this.$store.state.acc + '/show').then(resp => {
      this.userInfo = resp.data
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
    this.$axios.get('/teacher/user/avail_time/' + this.$store.state.acc + '/show').then(resp => {
      this.userTime = resp.data
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
  }
}
</script>

<style scoped>
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}

.el-container {
  padding: 20px 0;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
